<template>
	<view class="resinfo">
		<view class="resitems"><text>公亲名字：</text>
			<view class="" @click="isShow = true">{{fatherName || '暂无'}}（点击查看普书）</view>
		</view>
		<view class="resitems"><text>姓：</text>
			<view class="">{{groundInfo.firstName || '暂无'}}</view>
		</view>
		<view class="resitems"><text>名：</text>
			<view class=""> {{groundInfo.lastName || '暂无'}}</view>
		</view>
		<view class="resitems"><text>曾用名：</text>
			<view>{{groundInfo.formerName || '暂无'}}</view>
		</view>
		<view class="resitems"><text>字：</text>
			<view>{{groundInfo.zhi || '暂无'}}</view>
		</view>
		<view class="resitems"><text>字辈：</text>
			<view>{{groundInfo.zhiName || '暂无'}}</view>
		</view>
		<view class="resitems"><text>排行：</text>
			<view>{{groundInfo.rank || '暂无'}}</view>
		</view>
		<view class="resitems"><text>生日：</text>
			<view>{{groundInfo.birthday || '暂无'}}</view>
		</view>
		<view class="resitems"><text>身份证号：</text>
			<view>{{groundInfo.idCard || '暂无'}}</view>
		</view>
		<view class="resitems"><text>世代：</text>
			<view>{{groundInfo.generation || '暂无'}}</view>
		</view>
		<view class="resitems"><text>堂号：</text>
			<view>{{groundInfo.hao || '暂无'}}</view>
		</view>
		<view class="resitems"><text>籍贯：</text>
			<view>{{groundInfo.nativePlace || '暂无'}}</view>
		</view>
		<view class="resitems"><text>民族：</text>
			<view>{{groundInfo.marriage || '暂无'}}</view>
		</view>
		<view class="resitems"><text>婚姻：</text>
			<view>{{groundInfo.ethnicity || '暂无'}}</view>
		</view>
		<view class="resitems"><text>学历：</text>
			<view>{{groundInfo.education || '暂无'}}</view>
		</view>
		<view class="resitems"><text>职业：</text>
			<view>{{groundInfo.occupation || '暂无'}}</view>
		</view>
		<view class="resitems"><text>出生地址：</text>
			<view>{{groundInfo.birthAddress || '暂无'}}</view>
		</view>
		<view class="resitems"><text>家庭地址：</text>
			<view>{{groundInfo.homeAddress || '暂无'}}</view>
		</view>
		<view class="resitems"><text>个人简介：</text>
			<view>{{groundInfo.introduction || '暂无'}}</view>
		</view>
	</view>

	<movable-area :style="{height: '100%',width: '100%'}" v-if="!psData.img && isShow">
		<!-- disabled -->
		<movable-view :scale="true" :scale-max="0.6" :scale-min="0.5" class="max" direction="horizontal"
			:style="{width: `${treeConfig.width}px`,height: `${treeConfig.height}px`}" inertia>
			<view class="tree-content temp">
				<Template :data="psData" />
			</view>
			<view class="">可拖动缩放</view>
		</movable-view>
	</movable-area>
	<!-- <TemplateTwo /> -->

	<view class="img" v-if="psData.img && isShow">
		<image @click="priview(psData.img)" :src="psData.img" mode="widthFix"></image>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		psQuery
	} from '@/api/ancestra.js';
	import Template from '@/components/template.vue';
	// import TemplateTwo from '@/components/templateTwo.vue';
	let treeConfig = ref({ // movable-view移动区域大小
		width: 0,
		height: 70
	})

	let groundInfo = ref({})
	let fatherName = ref('')
	onLoad((e) => {
		groundInfo.value = JSON.parse(decodeURIComponent(e.data)).entity
		fatherName.value = JSON.parse(decodeURIComponent(e.data)).name
		console.log(e.data, 'groundInfo.value')
		lookPs()
	})

	const isShow = ref(true)
	const psData = ref()
	const lookPs = async () => {
		const res = await psQuery(groundInfo.value)
		if (res.code == 200) {
			psData.value = res.data
			isShow.value = false
		}
	}

	// 图片预览
	const priview = (img) => {
		uni.previewImage({
			urls: [img],
			current: 1
		})
	}
</script>

<style lang="scss">
	page {
		background-image: url('@/static/bgimg.png');
		background-size: 100% 100%;
	}

	.img {
		image {
			width: 100%;
		}
	}

	.resinfo {
		width: 690rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		margin-left: 30rpx;

		.resitems {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;

			text {
				display: block;
				width: 180rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

			view {
				width: 500rpx;
				// background: #666;
			}
		}
	}
</style>